<script lang="ts" setup>
import mySubMenu from './mySubMenu.vue'
import { ref, onBeforeMount,toRaw} from 'vue'
import {useAuthStore } from '@/store'
import { useRouter, useRoute } from "vue-router"
import {primaryColor_rgb,primaryColorFade} from "@/theme/config"

const props = withDefaults(
	defineProps<{
		collapse: boolean
		width: string   // 非折叠时的宽度
		theme:string    // 主题色,只支持单词和十六进制
		textColor:string  // 文本颜色
	}>(),
	{
		collapse: false,
	}
)

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()

const activeKey = ref<string>('')
const openKeys = ref<string[]>([])
const activePath = ref<string[]>([])
const iconStyle:any = {fontSize:'15px'}
const menu_item_hover_bg=primaryColorFade(0.2)

onBeforeMount(() => {
	 activePath.value=route.matched.map(v=>v.name) as string[]
	 activeKey.value=route.name as string
})


const handleSelect = (key: string, keyPath: string[], route: any) => {
//   console.log(key)
}

const handleOpen = (key: string, keyPath: string[]) => {
	if (activeKey.value != key) {
		//  console.log("open",key, keyPath)
		openKeys.value.push(key)
	}
}
const handleClose = (key: string, keyPath: string[]) => {
	// console.log("close",key, keyPath)
	openKeys.value.splice(openKeys.value.indexOf(key), 1)
}
const clearActive = () => {
	activeKey.value = ''
	activePath.value=[]
	openKeys.value = []
}

const bindMenuItemClicked=(i:RouteItemConfig)=>{
	if(!i.meta.link&&!i.component) {
		console.warn('请配置组件路径',toRaw(i))
		return
	}
	//console.log(i)
	if(i.meta.link)
	{
	  window.open(i.path)
	  active_pre()
	}
	else
	router.push({ name:i.name })
    // console.log(activeKey.value)
	
}



const active_pre=()=>{
	const pre_active=activeKey.value
	//console.log(pre_active)
	activeKey.value=''
	setTimeout(() => {
		activeKey.value=pre_active
	}, 10);
}

const changeActive=(_activeKey:string,_activePath:string[])=>{
   activeKey.value=_activeKey
	 activePath.value=_activePath
}

defineExpose({
	clearActive,
	changeActive,
})

</script>

<template>
	<el-menu class="my-menu" :background-color="theme" :active-text-color="primaryColor_rgb" :text-color="textColor"
		:collapse="collapse" :default-active="activeKey" @open="handleOpen" @close="handleClose" @select="handleSelect">
		<!-- <template v-for="(item, index) in menuData"> -->
		<template v-for="(item, index) in authStore.menu">
			<el-menu-item :index="item.name" v-if="!item.children" :key="item.name" @click="bindMenuItemClicked(item)">
					<span v-if="item.meta.icon" :class="['menu_item_icon','iconfont',`icon-${item.meta.icon}`]" :style="{...iconStyle,color:activeKey == item.name?primaryColor_rgb:textColor}"></span>

				<template #title>
					<span class="title">{{ item.meta?.title }}</span>
				</template>
			</el-menu-item>

			<mySubMenu v-else :key="item.name + index" :subMenuData="item" :active-path="activePath" :open-keys="openKeys" :menu_item_hover_bg="menu_item_hover_bg"  :textColor="textColor"
				:select-key="activeKey" :iconStyle="iconStyle"  :active_pre="active_pre" />
		</template>
	</el-menu>
</template>

<style lang="scss">
.my-menu {
	border-right: none;
	&:not(.el-menu--collapse) {
		width: v-bind(width);
	}
	border-right: none;
  
	.el-menu-item,.el-sub-menu__title{
    align-items: unset;
	}

	// .el-menu-item:hover,.el-sub-menu__title:hover{
	.el-menu-item:hover{
		background-color:v-bind(menu_item_hover_bg) !important;
	}
   
	.el-menu-item .title,
	.el-sub-menu  .title {
		padding-left: 15px;
		user-select: none;
	}

	

}

</style>
